<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form style="float: left">
            <!-- <el-button size="mini" type="primary" @click="getData"
              >查 询</el-button
            > -->
            <el-button size="mini" type="success" @click="showAddDialog"
              >新 增</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="菜谱名称"
        label="菜谱名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="所属食堂"
        label="所属食堂"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="菜谱状态"
        label="菜谱状态"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showUpdateDialog(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.菜谱状态 === '停用'"
            style="margin-left: 35px"
            type="text"
            icon="el-icon-success"
            @click="handleStartState(scope.$index, scope.row)"
            >启用</el-button
          >
          <el-button
            v-if="scope.row.菜谱状态 === '启用'"
            style="color: #ff0000; margin-left: 35px"
            type="text"
            icon="el-icon-error"
            @click="handleStopState(scope.$index, scope.row)"
            >停用</el-button
          >
          <el-button
            style="color: #ff0000; margin-left: 35px"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 弹出框 编辑 -->
    <el-dialog
      :title="formUpdate.title"
      :visible.sync="formUpdate.show"
      width="40%"
    >
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        label-width="100px"
        class="flex"
      >
        <el-form-item label="日期：">
          <el-select
            @change="changeFormUpdate"
            v-model="formUpdate.WeekName"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in weekdayList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间段：">
          <el-radio-group
            v-model="formUpdate.DishType"
            @change="changeFormUpdate"
          >
            <el-radio :label="0">早餐</el-radio>
            <el-radio :label="1">午餐</el-radio>
            <el-radio :label="2">晚餐</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜品：">
          <el-select
            filterable
            multiple
            collapse-tags
            v-model="formUpdate.DishValuelist"
            placeholder="请选择"
            style="width: 200px"
            :popper-append-to-body="false"
            @change="addDishList"
          >
            <el-option
              v-for="item in dishList"
              :key="item.ID"
              :label="item.菜品名称"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="formUpdate.Dishlist" highlight-current-row>
        <el-table-column label="序号" type="index" align="center" width="100">
        </el-table-column>
        <el-table-column
          prop="DishName"
          label="菜品名称"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="菜品名称">
          <template slot-scope="scope">
            {{ scope.row }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              style="color: #ff0000"
              type="text"
              icon="el-icon-delete"
              @click="dishDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formUpdate.show = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 新增 -->
    <el-dialog :title="formAdd.title" :visible.sync="formAdd.show" width="40%">
      <el-form ref="formAdd" :model="formAdd" label-width="100px" class="flex">
        <el-form-item label="选择周：">
          <el-date-picker
            v-model="formAdd.monday"
            type="week"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formAdd.show = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formAdd: {},
      formUpdate: {},
      OrganizationList: [],
      tableData: [],
      originalData: [],
      dishList: [],
      dishList0: [],
      dishList1: [],
      dishList2: [],
      weekdayList: [{ "label": "周一", "value": "0" }, { "label": "周二", "value": "1" }, { "label": "周三", "value": "2" }, { "label": "周四", "value": "3" }, { "label": "周五", "value": "4" }],
      value1: '',
    }
  },
  mounted () {
    this.getDishInfo()
    // this.dishList1 = this.getDishInfo(1)
    // this.dishList2 = this.getDishInfo(2)
    this.getData()
  },
  methods: {
    // 获取 菜品列表
    async getDishInfo () {
      var url = 'System/GetDishInfo?UserID=' + localStorage.getItem('UserID') + '&Name=&Type=-1'
      const { data } = await this.$Http.get(url)
      this.dishList0 = []
      this.dishList1 = []
      this.dishList2 = []

      data.forEach(element => {
        if (element.时间段 === '早餐') {
          this.dishList0.push(element)
        } else
          if (element.时间段 === '午餐') {
            this.dishList1.push(element)
          } else
            if (element.时间段 === '晚餐') {
              this.dishList2.push(element)
            }
      });
    },
    // 获取 菜谱列表
    async getData () {
      var url = 'System/GetMenuInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      console.log(data)
      // this.originalData = [{"VID":535,"WORKDATE":"2021-06-16","AM_IN":"06:28:50","AM_OUT":"11:00:49","PM_IN":"13:20:57","PM_OUT":"22:03:01","APOINT":40,"WORKCOUNT":"7.5","CPOINT":30,"WORKTIME":"224","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"刘广梅","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":541,"WORKDATE":"2021-06-16","AM_IN":"04:56:33","AM_OUT":"11:01:22","PM_IN":"13:25:36","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"19.1","CPOINT":30,"WORKTIME":"370","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"孟广珍","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":552,"WORKDATE":"2021-06-16","AM_IN":"04:46:50","AM_OUT":"11:04:35","PM_IN":"13:24:25","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"24.2","CPOINT":30,"WORKTIME":"456","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"郭天利 ","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null}]
      this.personQuery()
    },
    // 模糊查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // const { name, client } = this.person
      // if (name) this.tableData = this.tableData.filter(item => item.CLIENT_NAME.includes(name))
      // if (this.teamValue != '全部') this.tableData = this.tableData.filter(item => this.teamValue == item.TITLE)
    },
    // 打开新增窗口
    showAddDialog () {
      //清空编辑框
      this.formAdd = {
        title: '新增菜谱',
        show: true,
        monday: '',
      }
    },
    addDishList () {
      this.formUpdate.Dishlist = []
      this.formUpdate.DishValuelist.forEach(val => {
        for (let index = 0; index < this.dishList.length; index++) {
          const element = this.dishList[index];
          if (element.ID === val) {
            element.DishName = element.菜品名称
            this.formUpdate.Dishlist.push(element)
          }
        }
      });
    },
    dishDelete (index, row) {
      this.formUpdate.DishValuelist.splice(index, 1);
      this.formUpdate.Dishlist.splice(index, 1);
    },
    async changeFormUpdate () {
      // this.formUpdate.Dishlist = []
      // this.dishList = []
      // this.dishList0.forEach(element => {
      //   if (this.formUpdate.DishType === 0 && element.时间段 === '早餐') {
      //     this.dishList.push(element)
      //   } else
      //   if (this.formUpdate.DishType === 1 && element.时间段 === '午餐') {
      //     this.dishList.push(element)
      //   } else
      //   if (this.formUpdate.DishType === 2 && element.时间段 === '晚餐') {
      //     this.dishList.push(element)
      //   }
      // });
      switch (this.formUpdate.DishType) {
        case 0:
          { this.dishList = this.dishList0 }
          break;
        case 1:
          { this.dishList = this.dishList1 }
          break;
        default:
          { this.dishList = this.dishList2 }
          break;
      }
      // this.dishList = this.dishList0
      console.log(this.dishList)
      var url = 'System/GetMenuDetailInfo?WeekName=' + this.formUpdate.WeekName + '&DishType=' + this.formUpdate.DishType + '&CMID=' + this.formUpdate.CMID
      const { data } = await this.$Http.get(url)

      var dishArr = []
      data.forEach(element => {
        dishArr.push(element.ID)
      });

      this.formUpdate.DishValuelist = dishArr
      this.formUpdate.Dishlist = data
    },
    // 打开新增窗口
    showUpdateDialog (index, row) {
      var menuData = Object.assign({}, row);

      this.formUpdate = {
        title: '编辑菜谱',
        show: true,
        CMID: menuData.ID,
        WeekName: '周一',
        DishType: 0,
        DishValuelist: [],
        Dishlist: [],
      }
      this.changeFormUpdate()
    },
    handleUpdate () {
      this.$axios({
        url: 'CompanyAPI/System/UpdateMenuInfo',
        method: 'post',
        data: this.formUpdate
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功')
          this.formAdd.show = false;
          this.getData()
        } else {
          this.$message.error('编辑失败' + '，' + res.data.Message);
        }
      })
    },
    async handleAdd () {
      var url = 'System/AddMenuInfo?UserID=' + localStorage.getItem('UserID') + '&Monday=' + this.formAdd.monday
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('新增菜谱成功')
        this.formAdd.show = false;
        this.getData()
      } else {
        this.$message.error('新增菜谱失败');
      }
    },
    async handleStopState (index, row) {
      var url = 'System/UpdateMenuStatus?MenuState=0&MenuID=' + row.ID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('停用成功')
        this.getData()
      } else {
        this.$message.error('停用失败');
      }
    },
    async handleStartState (index, row) {
      var url = 'System/UpdateMenuStatus?MenuState=1&MenuID=' + row.ID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('启用成功')
        this.getData()
      } else {
        this.$message.error('启用失败');
      }
    },

    // 删除
    async handleDelete (index, row) {
      var url = 'System/DeleteMenuInfo?MenuID=' + row.ID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('删除成功')
        this.getData()
      } else {
        this.$message.error('删除失败');
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
    },
    handleSizeChange (size) {
      this.pageSize = size;
      // console.log(this.pageSize)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-tag.el-tag--info {
  max-width: 800px;
  // width: vw(100);
  display: flex;
  justify-content: space-between;
}
.tags_data {
  ::v-deep .el-tag.el-tag--info:last-of-type {
    width: vw(36);
  }
}
</style>